<template>
  <div class="designerdetails pr details-container xiangqings-container" :class="[this.flag ? 'active' : '']">
    <CommonHead></CommonHead>
    <div class="cons pr">
      <div class="title">纺织行业通用高端PSD模板</div>
      <div class="banq">版权登记号：VM012821125851122111s</div>
      <div class="sculpture-le clearfix">
        <div class="fl sculpture-img clearfix">
          <img :src="baseUrl + userInfo.avatar" alt="" class="fl" />
          <div class="fl">
            <p class="surname">{{ userInfo.name }}</p>
            <p class="name-position">苏州 | 平面设计师</p>
          </div>
        </div>
        <div class="fr overall-btn">
          <a href="javascript:;" class="storp-a" @click="favoritesshow"><i class="iconfont icon-shoucang"></i> 收藏</a>
          <a class="pr"><i class="iconfont icon-youxiang"></i> 联系我
            <div class="pa contact-me-box">
              {{ userInfo.mobile }}
              <br />{{ userInfo.email }}
            </div>
          </a>
        </div>
      </div>
      <div class="designerdetails-con">

        <img :src="baseUrl + worksDetail.image" alt="" class="w100" />
        <br />
        <br />
        Transpix是一个优秀的响应PSD模板，为物流，运输，航运公司。这是一个理想的为您开创一个业务的物流，运输，航运和多种用途。有12个PSD文件，我们相信你会爱上这个模板。
        <br />如果你想建立你的在线商业/公司网站，这是最适合你的模板
        <hr />
        <p class="qian-p">模板特征</p>
        {{ worksDetail.feature }}
        <!-- <p class="qian-p">你得到了什么</p> -->
        <hr />
        <!-- <br />• 01_home.psd <br />• 02_home-s2.psd <br />• 03_home-s3.psd <br />• 04_about.psd
        <br />• 05_services.psd <br />• 06_service-single.psd <br />• 07 _博客. psd <br />•
        08_blog-single.psd <br />• 09 _证明书. psd <br />• 10 _ faqs.psd <br />• 11_contact.psd
        <br />• 12 _报价. psd <br /><br /> -->
        <p class="qian-p">版权信息</p>
        {{ worksDetail.copyright_info }}
        <br />
        字体:思源Sans Pro
        <br />
        <hr />
      </div>
      <div class="sustain-div">
        <p><strong>支持</strong></p>
        <div>如果您需要任何帮助使用文件或需要特殊定制，请随时与我们联系。我们会尽力的。谢谢你</div>
        <div class="state">
          声明：uimall内网友所发表的所有内容及言论仅代表其本人，并不反映任何uimall之意见及观点。
        </div>
      </div>
      <div class="foot-designer ta">
        <div class="sculpture-le">
          <div class="xian pa"></div>
          <div class="sculpture-img ta">
            <img :src="baseUrl + userInfo.avatar" alt="" />
            <div class="">
              <p class="surname">{{ userInfo.name }}</p>
              <p class="name-position">苏州 | 平面设计师</p>
            </div>
          </div>
          <div class="overall-btn">
            <a href=""><i class="iconfont icon-youxiang"></i> 联系我</a>
          </div>
        </div>
        <div class="other-works">
          <div class="other-top clearfix">
            <p class="fl">其他作品</p>
            <a href="" class="fr">查看更多</a>
          </div>
          <div class="works-div">
            <div class="row">
              <div class="col-sm-3 " v-for="item in  other_projectArr " :key="item.id">
                <a @click="handlePush(item.id)">
                  <img :src="baseUrl + item.image" alt="" />
                </a>
              </div>

            </div>
          </div>
        </div>
      </div>


      <!-- 右侧图标-->
      <ul class="pa icon-ul icon-ul1" :class="[this.flag ? 'active' : '']">
        <li @click="show()">
          <span>
            <i class="iconfont icon-xiaoxi"></i>
          </span>
          <div class="feedback pa">反馈</div>
          <div class="prompt pa">{{ commentlistArr.length }}</div>
        </li>
        <li @click="shareshow">
          <span>
            <i class="iconfont icon-icshare2"></i>
          </span>
          <div class="feedback pa">分享</div>
        </li>
        <li>
          <span>
            <i class="iconfont icon-dianzan_kuai"></i>
          </span>
          <div class="feedback pa">点赞</div>
          <div class="prompt pa">1</div>
        </li>
        <li @click="favoritesshow">
          <span>
            <i class="iconfont icon-shoucang"></i>
          </span>
          <div class="feedback pa">收藏</div>
        </li>
        <li @click="particularsshow">
          <span>
            <i class="iconfont icon-jinggao"></i>
          </span>
          <div class="feedback pa">细节</div>
        </li>
      </ul>
      <div class="right-feedback" :class="[this.flag ? 'active' : '']">
        <div class="pa close-btn" @click="hide()">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <ul class="icon-ul clearfix">
          <li>
            <span>
              <i class="iconfont icon-xiaoxi"></i>
            </span>
          </li>
          <li>
            <span>
              <i class="iconfont icon-icshare2"></i>
            </span>
          </li>
          <li>
            <span>
              <i class="iconfont icon-dianzan_kuai"></i>
            </span>
          </li>
          <li>
            <span>
              <i class="iconfont icon-shoucang"></i>
            </span>
          </li>
          <li>
            <span>
              <i class="iconfont icon-jinggao"></i>
            </span>
          </li>
        </ul>
        <p class="fankui-p">反馈</p>
        <div class="commit-box">
          <form action="">
            <!-- 评论框 -->
            <textarea v-model="messageContent" @keydown.enter="submitComment(messageContent)"> 说两句吧~</textarea>
            <div class="tr post-btn">
              <div class="comment" @click="submitComment(messageContent)">发布评论</div>
            </div>
          </form>
        </div>
        <div class="commit-ner">
          <ul class="commit-ul">
            <li class="pr" v-for=" item in commentlistArr" :key="item.id">
              <p class="p1">{{ item.user.name }} <span>·{{ item.user.created_at }}</span></p>
              <!-- 一级评论 -->
              <p class="p3">
                {{ item.content }}
              </p>
              <!-- 二级评论 -->
              <p class="p2" v-for="child in item.children" :key="child.id"> {{ child.content }}</p>

              <div class="reply-box">
                <div class="reply-div">
                  <!-- 控制回复显示与隐藏 -->
                  <a class="reply" @click="item.showReply = !item.showReply">回复</a>
                </div>
                <div class="commit-box commit-box2" v-if="item.showReply">
                  <form action="">
                    <textarea placeholder="说两句吧" v-model="item.replyCommentText"
                      @keydown.enter="handleReplyComment(item.replyCommentText, item.id)"> </textarea>
                    <div class="tr post-btn">
                      <!-- 拿到当前的id -->
                      <div class="comment" @click="handleReplyComment(item.replyCommentText, item.id)">发布评论</div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="tou-img pa">
                <img class="img1" :src="baseUrl + item.user.avatar" alt="" />
              </div>
            </li>

          </ul>
        </div>
      </div>

    </div>

    <!-- 创建收藏夹-->
    <div class="tanchu-box" v-if="favorites">
      <div class="modify-avatar">
        <div class="colse pa" @click="favoriteshide">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <p class="tile">创建收藏夹</p>
        <div class="edit-box">
          <ul>
            <li>
              <p>收藏夹名称</p>
              <input type="text" placeholder="喜欢的网站" v-model="FavoriteName" />
            </li>
            <li>
              <p>备注</p>
              <textarea v-model="notes"> </textarea>
              <p class="bz-p">URL 是超链接的。只允许 'a'。</p>
            </li>
          </ul>
        </div>
        <div class="overall-btn ta">
          <a @click="save(FavoriteName, notes)">保存</a>
          <a @click="cancel">取消</a>
        </div>
      </div>
    </div>
    <!-- 细节 -->
    <div class="tanchu-box" v-if="particulars">
      <div class="modify-avatar">
        <div class="colse pa" @click="particularshide">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <p class="tile">作品细节</p>
        <p class="data-particulars">2023 年 3 月 6 日发布</p>
        <div class="particulars-box">
          <div class="clearfix particulars-ping">
            <div class="fl">
              评论
              <br />9,946
            </div>
            <div class="fl">
              收藏
              <br />70
            </div>
          </div>
          <div class="particulars-tag">
            <p>标签</p>
            <ul class="tag-ul clearfix">
              <li>
                <a href=""> 现代主义</a>
              </li>
              <li>
                <a href=""> 响应式</a>
              </li>
              <li>
                <a href=""> 集团化</a>
              </li>
              <li>
                <a href=""> 装饰网页</a>
              </li>
              <li>
                <a href=""> 现代主义</a>
              </li>
              <li>
                <a href=""> 响应式</a>
              </li>
              <li>
                <a href=""> 集团化</a>
              </li>
              <li>
                <a href=""> 装饰网页</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出分享 -->
    <div class="tanchu-box copy-box" v-if="share">
      <div class="modify-avatar">
        <div class="colse pa" @click="sharehide">
          <i class="iconfont icon-guanbi"></i>
        </div>


        <div class="feng-tu">
          <img src="@/assets/img/11.jpg" alt="特色图片" class="share-modal-image">
        </div>
        <p class="tile ta">与您的社交社区分享</p>

        <div class="shareBox">

          <span class="hover-pointer" @click="shareToMicroblog()">
            <i class="iconfont icon-weibo"></i>
          </span>

          <span class="hover-pointer" @click="shareToWeChat()">
            <i class="iconfont icon-weixin"></i>
          </span>
        </div>


        <div class="divlink" id="copyText">
          {{ shareUrl }}
        </div>
        <div id="copybtn" @click="copyText">
          复制
        </div>
      </div>

    </div>
    <FootCopyright></FootCopyright>
  </div>
</template>
<script>

import { onBeforeUpdate } from 'vue';

import * as api from "@/api/users"

import { ElMessage } from 'element-plus'




let userInfo = sessionStorage.getItem('userInfo',)
let userInfoParse = JSON.parse(userInfo)
// console.log(userInfoParse, '213');

export default {
  data() {
    return {
      flag: false,
      favorites: false,
      particulars: false,
      share: false,
      sysInfo: '纺织行业通用高端PSD模板',
      shareUrl: location.href,

      // 评论列表
      commentlistArr: [

      ],

      // 二级评论列表
      secondCommentList: [],

      // 评论信息
      messageContent: "",

      // 回复评论双向绑定
      replyCommentText: "",

      // 其他作品
      other_projectArr: '',

      // 用户信息
      userInfo: "",

      // 图片网址
      baseUrl: 'https://ui-mall.oss-accelerate.aliyuncs.com/',

      // worksDetail
      worksDetail: '',


      // 收藏夹
      // 收藏夹名称双向绑定
      FavoriteName: "",

      // 收藏夹备注
      notes: "",

    }
  },
  setup() {

    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    function consoleBtn() {
      console.log(itemRefs); //拿到的是一个元素数组
    }
    return {
      setItemRef, consoleBtn
    }
  },

  created() {
    // 调用作品详情
    this.getWorksDetail()

    // 调用评论列表
    this.getComment(this.$route.query.id)


    // 调用添加收藏夹
  },



  methods: {

    // 添加收藏夹
    save(name, notes) {
      console.log(name, '网站名', notes, '输入内容');
      if (!this.FavoriteName  || !this.notes) {
        alert('请输入文件夹名称和备注')
        return
      }
     
      this.favorites = false
      this.getAddCollectFoldr(name, '', notes)
    },

    // 收藏夹添加
    async getAddCollectFoldr(name, image, remark) {
      try {
        let res = await api.addCollectFoldrApi(name, image, remark)
        // console.log(res);
      } catch (e) {
        console.log(e);
      }
    },


    // 取消
    cancel() {
      this.favorites = false

    },





    async shareToMicroblog() {
      //跳转地址
      window.open(
        "//service.weibo.com/share/share.php?url=" +
        encodeURIComponent(this.shareUrl) +
        "&title=" +
        this.sysInfo
      );
    },

    /**
     * 分享到微信：需要单独画页面
     */
    async shareToWeChat() {
      localStorage.setItem("shareUrl", this.shareUrl); // 存储当前页面地址，前端页面直接根据URL链接生成二维码
      let url = location.href.split("#")[0] + "#/Share/toWechat"; // 注意：#/Share/toWechat: 自己定义的路由
      window.open(url);
    },




    // 封装一个方法用于请求作品详情
    async getWorksDetail() {
      try {
        let res = await api.worksDetailApi(this.$route.query.id)
          .then(res => {
            // console.log(res)
            this.other_projectArr = res.data.data.other_project
            console.log(this.other_projectArr);
            this.userInfo = res.data.data.detail.user
            this.worksDetail = res.data.data.detail
            console.log(this.worksDetail)
          })
      } catch (e) {
        console.log(e);
      }
    },
    // 其他作品
    handlePush(id) {
      console.log(id, 'id');
      this.$router.push({
        path: '/designerdetails',
        query: {
          id
        }

      })
      setTimeout(() => {
        console.log(this.$route.query.id, 'query');
        this.getWorksDetail(this.$route.query.id)

      }, 1);

    },


    // 封装一个方法用于请求评论列表
    async getComment(id) {
      try {
        let res = await api.commentListApi(id)
          .then(res => {
            this.commentlistArr = res.data.data
            // console.log(this.commentlistArr);
          })
      } catch (e) {
        console.log(e);
      }
    },

    // 封装一个方法用于添加评论
    async addComment(to_user_id, project_id, parent_id, content) {
      try {
        let res = await api.addCommentApi(to_user_id, project_id, parent_id, content)
          .then(res => {
            console.log(res);
          })
      } catch (e) {
        console.log(e);
      }
    },



    // 提交评论
    submitComment(msg) {
      // console.log(msg);
      // 如果为空不让评论


      if (!this.messageContent.trim()) {
        return
      }

      api.addCommentApi(userInfoParse.id, this.$route.query.id, 8, msg)
        .then(res => {
          // console.log(res);
          if (res.data.msg) {
            // 添加成功重新获取列表 更新数据
            this.getComment(this.$route.query.id)
            this.messageContent = ''
          }
        })
    },


    // 回复评论
    handleReplyComment(msg, pid) {
      console.log(msg);
      console.log(pid, 'id');

      api.addCommentApi(userInfoParse.id, this.$route.query.id, pid, msg)
        .then(res => {
          if (res.data.msg) {
            this.getComment(this.$route.query.id)
            this.messageContent = ''
          }
        })
    },

    copyText() {
      isReply
      const range = document.createRange();
      range.selectNode(document.getElementById('copyText'));
      const selection = window.getSelection();
      if (selection.rangeCount > 0) selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');

      this.$message.success("复制成功")
      // ElMessage.success({
      //   message: '复制成功',
      //   type: "success"
      // });
    },


    async show() {
      this.flag = true
    },
    async hide() {
      this.flag = false
    },
    async favoritesshow() {
      this.favorites = true
    },
    async favoriteshide() {
      this.favorites = false
    },
    async particularsshow() {
      this.particulars = true
    },
    async particularshide() {
      this.particulars = false
    },


    async replyhide() {
      this.reply = false
    },
    async shareshow() {


      this.share = true
    },
    async sharehide() {
      this.share = false
    },

    /**
     * 分享到微博
     */




  },

}

</script>

<style scoped lang="less">
.comment {
  background: #EA4C89;
  color: #fff;
  padding: 0.625rem 1.875rem;
  border-radius: 1.875rem;
  font-size: 0.875rem;
  display: inline-block;
  border: none;
  cursor: pointer;
}

.reply {
  cursor: pointer;
  text-decoration: none;
}

.img1 {
  border-radius: 50%;
}
</style>